<template>
	<view class="paySuccessful">
		<view class="topBox">
			<view class="title flex_conter_c">
				<text class="text">还差1人，成团等待中</text>
				<u-loading mode="circle" size="28" color="#333"></u-loading>
			</view>
			<view class="btnBox">
				<button class="btn order" open-type="share">可邀请好友参团</button>
				<button class="btn back" @click="goIndex">去首页逛逛</button>
			</view>
			<view class="order flex_space_b">
				<text>订单详情</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
			<view class="warnBox">
				<view class="text">三个人成团，只有一人能得到商品</view>
				<view class="text">另外两个人全额退款，立赚￥0.33</view>
			</view>
		</view>
		
		<u-gap height="20" bg-color="#eee"></u-gap>
		
		<view class="lottery">
			<view class="relative flex_conter_c">
				<LuckyWheel
				  ref="luckyWheel"
				  width="260px"
				  height="260px"
				  :blocks="blocks"
				  :prizes="prizes"
				  :buttons="buttons"
				  :defaultStyle="defaultStyle"
				  :defaultConfig="defaultConfig"
				  @start="startCallBack"
				  @end="endCallBack"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	let base64Avatar = "";
	import LuckyWheel from '@/components/uni-luck-draw/lucky-wheel'

	export default {
		components: {
			LuckyWheel
		},
		data() {
			return {
				return_goods: 0,
				goods_id: 0,
				
				blocks: [{
					padding: '18px',
					background: '#f27c1c',
					imgs: [{
						src: '../../static/almost-lottery__bg.png',
						width: '260px',
						height: '260px'
					}],
				}],
				prizes: [{
					background: '#fff',
					wordWrap: false,
					lengthLimit: '90px',
					fonts: [{ text: '等待中...', top: '18%' }],
					imgs: [{ src: base64Avatar, width: 36, top: '46%' }]
				}, {
					background: '#fff',
					wordWrap: false,
					lengthLimit: '90px',
					fonts: [{ text: '等待中...', top: '18%' }],
					imgs: [{ src: base64Avatar, width: 36, top: '46%' }]
				}, {
					background: '#fff',
					wordWrap: false,
					lengthLimit: '90px',
					fonts: [{ text: '等待中...', top: '18%' }],
					imgs: [{ src: base64Avatar, width: 36, top: '46%' }]
				}],
				buttons: [
					// { radius: '45px', background: '#d64737' },
					// { radius: '40px', background: '#fff' },
					// { radius: '36px', background: '#f6c66f', pointer: true },
					// {
					// 	radius: '30px', background: '#ffdea0',
					// 	fonts: [{ text: '等待\n开团', fontSize: '16px', top: -18 }]
					// }
					{
						radius: '32px',
						fonts: [{ text: '等待\n开团', fontSize: '14px', fontColor: '#fff', top: -16 }],
						imgs: [{
							src: '../../static/almost-lottery__action.png',
							height: '80px',
							top: '-44px'
						}]
					}
				],
				defaultStyle: {
					fontColor: '#d64737',
					fontSize: '14px'
				},
				defaultConfig: {
					gutter: '2px',
					stopRange: 0,
					offsetDegree: 0
				}
			}
		},
		onLoad(opt) {
			if(opt.return_goods){
				this.return_goods = opt.return_goods;
			}
			if(opt.goods_id){
				this.goods_id = opt.goods_id;
			}
			if(opt.token){
				uni.setStorageSync("xixuan_pintuan_token", opt.token);
			}
			
			let index = 0;
			setInterval(() => {
				if (index == 3) { return }

				this.prizes[index].fonts[0].text = '张三';
				this.prizes[index].imgs[0].src = 'http://m.imeitou.com/uploads/allimg/211030/3-211030132G0O9.jpg';
				
				index++;

				if (index == 3) {
					this.buttons[0].fonts = [{ text: '立即\n开团', fontSize: '14px', fontColor: '#fff', top: -16 }]
				}
			}, 5000)
		},
		onUnload () {
			uni.hideLoading()
		},
		methods: {
			copyOrderNo (data){
				uni.setClipboardData({
					data: data,
					success() {
						uni.$u.toast("复制成功！");
					}
				})
			},
			goIndex () {
				uni.switchTab({
					url: '/pages/index/index'
				});	
			},
			// 点击抽奖按钮触发回调
			startCallBack () {
				console.log('startCallBack');
				// 先开始旋转
				this.$refs.luckyWheel.play()
				// 使用定时器来模拟请求接口
				setTimeout(() => {
					// 3s后得到中奖索引
					let index = 1
					// 缓慢停止游戏
					this.$refs.luckyWheel.stop(index)
				}, 3000)
			},
			// 抽奖结束触发回调
			endCallBack (prize) {
				// 奖品详情
				console.log(prize)
			}
		}
	}
</script>

<style scoped lang="scss">
.paySuccessful {
	min-height: 100%;
	background-color: var(--warningColor);
}
.topBox {
	background-color: #FFFFFF;
	.title {
		padding: 52rpx 0;
		.text {
			margin-right: 20rpx;
		}
	}
}
.btnBox {
	padding-bottom: 20rpx;
	.btn {
		width: auto;
		margin: 0 28rpx;
		font-size: 28rpx;
		font-weight: 500;
		padding: 4rpx 92rpx;
		font-size: 28rpx;
		&.order {
			color: #fff;
			background: var(--btnBgColor);
		}
		&.back {
			margin-top: 24rpx;
			color: var(--redColor);
			background-color: #ffffff;
			border: 1rpx solid var(--redColor);
		}
		&::after {
			border: none;
		}
	}
}
.order {
	padding: 20rpx 28rpx;
	border-top: 1rpx solid #EEEEEE;
}
.warnBox {
	border-top: 1rpx solid #EEEEEE;
	padding: 20rpx 0;
	text-align: center;
	line-height: 46rpx;
	color: #f37b1d;
	font-size: 30rpx;
	font-weight: bold;
}
.lottery {
	padding: 32px 0;
	background-color: var(--warningColor);
}
</style>
